<template>
	<view class="booking-list">
		<view class="page-header">
			<view class="page-header-title">
				学员训练历史
			</view>
			<view class="page-header-con" v-if="userInfo">
				学员：{{userInfo.nickname || '未设置姓名'}}
			</view>
		</view>
		<!-- 使用v-for循环渲染训练报告列表 -->
		<view class="booking-list-item" v-for="(item, index) in trainingReports" :key="item.id">
			<view class="booking-header">
				<text class="booking-title">
					{{item.name}}
				</text>
				<view class="booking-status">
					{{formatDate(item.startTime)}}
				</view>
			</view>
			<view class="booking-details">
				<text>
					教练：
				</text>
				{{item.aoachName || '未指定'}}
			</view>
			<view class="booking-details">
				<text>
					主要内容：
				</text>
				<view class="con">
					{{item.trainingContent || '无训练内容'}}
				</view>
			</view>
			<view class="booking-details">
				<text>
					反馈：
				</text>
				{{item.feedback || '无反馈'}}
			</view>
			<view class="booking-details">
				<text>
					建议：
				</text>
				{{item.suggestion || '无建议'}}
			</view>
		</view>

		<!-- 无数据提示 -->
		<view class="no-data" v-if="trainingReports.length === 0">
			<text>暂无训练记录</text>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		getToken
	} from '@/utils/auth.js';
	export default {
		data() {
			return {
				trainingReports: [], // 存储训练报告列表
				userInfo: null // 用户信息
			}
		},
		onLoad() {
			// 获取用户信息
			this.userInfo = getUserInfo();
			// 加载训练报告数据
			this.getTrainingReports();
		},
		methods: {
			// 获取训练报告列表
			getTrainingReports() {
				if (!getToken()) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					return;
				}

				uni.showLoading({
					title: '加载中...'
				});

				const data = {
					openid: getToken()
				};

				this.request('gym/TrainingReports/select', data, 'GET').then(res => {
					uni.hideLoading();
					if (res && res.code === 200 && res.data) {
						this.trainingReports = res.data;
					} else {
						console.log('获取训练报告失败:', res?.msg);
						this.trainingReports = [];

						uni.showToast({
							title: '获取训练报告失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					uni.hideLoading();
					console.error('请求发生错误:', err);
					this.trainingReports = [];

					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					});
				});
			},

			// 格式化日期为 YYYY-MM-DD 格式
			formatDate(dateTimeStr) {
				if (!dateTimeStr) return '';

				const date = new Date(dateTimeStr);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');

				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/mixins.scss';

	// @include rounded-box(32upx);
	// @include box-sizing-padding(24upx);
	// @include flex-center(center, space-between, column);
	.page-header {
		width: 100%;
		height: 200rpx;
		@include rounded-box(20upx, #FFD700);
		@include flex-center(center, center, column);
		margin-bottom: 30rpx;

		.page-header-title {
			font-size: 38rpx;
			color: #000;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.page-header-con {
			font-size: 32rpx;
			color: #000;
		}
	}

	.btn {
		width: 160rpx;
		height: 70rpx;
		@include rounded-box(10rpx, #d9534f);
		@include flex-center();
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		margin-top: 20rpx;
	}

	.booking-details {
		width: 100%;
		font-size: 28rpx;
		color: #fff;
		@include flex-center(flex-start, left);
		margin-bottom: 10rpx;

		.con {
			flex: 1;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		text {
			font-size: 30rpx;
			color: #aaa;
			font-weight: bold;
			min-width: 100rpx;
		}
	}

	.booking-header {
		width: 100%;
		height: 80rpx;
		@include flex-center(center, space-between);
		margin-bottom: 15rpx;

		.booking-title {
			font-size: 34rpx;
			color: #FFD700;
			font-weight: bold;
			border-bottom: 2px solid #FFD700;
			padding: 10rpx 0;
		}

		.booking-status {
			font-size: 28rpx;
			color: #ccc;
			@include flex-center();
		}
	}

	.booking-list {
		width: 680rpx;
		min-height: 100vh;
		margin: 30rpx auto;
		@include flex-center(center, top, column);

		.booking-list-item {
			width: 100%;
			min-height: 200rpx;
			border: 2rpx solid #444;
			@include rounded-box(16rpx, #2c2c2c);
			@include box-sizing-padding(20rpx);
			margin-bottom: 30rpx;
		}
	}

	.no-data {
		width: 100%;
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999;
		font-size: 28rpx;
	}
</style>